<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title> Sample registration page</title>
<link rel="stylesheet" type="text/css" href="css/office.css" />

</head>
<body>

<div class="center-box"></div>
<div class="row heading"> <b>Login to Office Web</b> </div>

<form  action="login" autocomplete="on"> 




     <h1>Log in</h1> 
     <p> 
          <label for="username" class="uname" class="column" data-icon="u" class="column"><b>Username:</b></label>
          <input id="username" name="username" required="required" type="text" placeholder="Username"/>
     </p>
     <p> 
          <label for="password" class="yourpasswd"class="column" data-icon="p"class="column"><b>Password:</b></label>
          <input id="password" name="password" required="required" type="password" placeholder="Password" /> 
     </p>
     <p class="keeplogin"> 
          <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
          <label for="loginkeeping">Keep me logged in</label>
     </p>
     <p class="login button"> 
          <input type="submit" value="Login" /> 
          <input type="reset" name="reset" value ="reset"/>          
     </p>
     
     <p> 
          <label for="firstname" class="fname" data-icon="f" ><b>Firstname:</b></label>
          <input id="firstname" name="firstname"  type="text" placeholder="firstname"/>
     </p>
     <p> 
          <label for="lastname" class="lname" data-icon="l" ><b>Lastname:</b></label>
          <input id="lastname" name="lastname"  type="text" placeholder="lastname"/>
     </p>
     <p> 
         <label><b>Gender:</b></label>
         <select name="Gender">
         <option value="male">Male</option>
         <option value="female">Female</option>
         <option value ="not needed">Not needed</option> 
         </select>
    </p>
     
      <p> 
         <label><b>Date of Birth:</b></label>
         <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
         <option value="na">Month</option>
         <option value="1">January</option>
         <option value="2">February</option>
         <option value="3">March</option>
         <option value="4">April</option>
         <option value="5">May</option>
         <option value="6">June</option>
         <option value="7">July</option>
         <option value="8">August</option>
         <option value="9">September</option> 
         <option value="10">October</option>
         <option value="11">November</option>
         <option value="12">December</option>
         </select>
         <select name="day" id="day">
         <option value="na">Day</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
         <option value="21">21</option>
         <option value="22">22</option>
         <option value="23">23</option>
         <option value="24">24</option>
         <option value="25">25</option>
         <option value="26">26</option>
         <option value="27">27</option>
         <option value="28">28</option>
         <option value="29">29</option>
         <option value="30">30</option>
         <option value="31">31</option>
         
         
         </select>
         <select name="year" id="year">
         <option value="na">Year</option>
         </select>
             </p>
     
     
     
     
</form>
</body>
</html>